<template>
  <div class="digital-human-container">
    <!-- 数字人主体区域 -->
    <div class="digital-human-main">
      <div class="digital-human-avatar" :class="currentState">
        <!-- 使用SVG作为数字人头像，确保在各种分辨率下清晰显示 -->
        <svg width="200" height="200" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <!-- 数字人头部轮廓 -->
          <circle cx="12" cy="9" r="4" fill="#f0d9b5" stroke="#d4b78c" stroke-width="0.5"/>
          <!-- 眼睛 - 根据状态变化 -->
          <g class="eyes">
            <circle v-if="currentState !== 'loading'" cx="10" cy="8" r="0.5" fill="#333">
              <animate v-if="currentState === 'speaking'" attributeName="r" values="0.5;0.6;0.5" dur="0.5s" repeatCount="indefinite"/>
            </circle>
            <circle v-if="currentState !== 'loading'" cx="14" cy="8" r="0.5" fill="#333">
              <animate v-if="currentState === 'speaking'" attributeName="r" values="0.5;0.6;0.5" dur="0.5s" repeatCount="indefinite"/>
            </circle>
            <!-- 加载状态的眼睛 -->
            <path v-else d="M9.5 7.5L10.5 8.5M14.5 8.5L13.5 7.5" stroke="#333" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
          <!-- 嘴巴 - 根据状态变化 -->
          <g class="mouth">
            <!-- 基本表情：微笑 -->
            <path v-if="currentState === 'listening'" d="M9 12 Q12 13.5 15 12" fill="none" stroke="#333" stroke-width="0.5" stroke-linecap="round"/>
            <!-- 说话表情：嘴巴张开并动画 -->
            <g v-else-if="currentState === 'speaking'">
              <path d="M9 11.5 Q12 14 15 11.5" fill="none" stroke="#333" stroke-width="0.5" stroke-linecap="round">
                <animate attributeName="d" values="M9 11.5 Q12 14 15 11.5;M9 12 Q12 13 15 12;M9 11.5 Q12 14 15 11.5" dur="0.3s" repeatCount="indefinite"/>
              </path>
            </g>
            <!-- 加载表情：闭着嘴 -->
            <path v-else-if="currentState === 'loading'" d="M9 12 H15" fill="none" stroke="#333" stroke-width="0.5" stroke-linecap="round"/>
            <!-- 录音表情：惊讶 -->
            <circle v-else-if="currentState === 'recording'" cx="12" cy="12" r="1.5" fill="none" stroke="#333" stroke-width="0.5"/>
          </g>
          <!-- 头发 -->
          <path d="M7 6 Q7 3 12 3 Q17 3 17 6" fill="#333"/>
          <path d="M6 7 L5 8 M18 8 L19 7" stroke="#333" stroke-width="1" stroke-linecap="round"/>
        </svg>
        <!-- 状态提示气泡 -->
        <div class="status-bubble" :class="currentState">
          <svg class="bubble-arrow" width="24" height="12" viewBox="0 0 24 12">
            <path d="M12 12 L6 6 L18 6 Z" fill="currentColor"/>
          </svg>
          <span>{{ getStatusText() }}</span>
        </div>
      </div>
    </div>
    <!-- 数字人状态指示器 -->
    <div class="digital-human-status">
      <div class="status-indicator" :class="currentState">
        <div class="status-dots">
          <span v-for="i in 3" :key="i" :style="{ animationDelay: `${i * 0.2}s` }"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'

const props = defineProps({
  state: {
    type: String,
    default: 'listening', // 可选值: listening, speaking, loading, recording, thinking
    validator: (value) => {
      return ['listening', 'speaking', 'loading', 'recording', 'thinking'].includes(value)
    }
  }
})

// 根据传入的state和对话状态，计算当前应该显示的状态
const currentState = computed(() => {
  return props.state
})

// 获取当前状态对应的文本提示
const getStatusText = () => {
  const statusTexts = {
    listening: '我在听，请说...',
    speaking: '正在回复...',
    loading: '正在加载...',
    recording: '正在录音...',
    thinking: '正在思考...'
  }
  return statusTexts[currentState.value] || '我在听，请说...'
}

// 监听状态变化，添加动画效果
watch(() => currentState.value, (newState) => {
  // 可以在这里添加状态变化时的音效或其他交互
  const container = document.querySelector('.digital-human-container')
  if (container && newState === 'speaking') {
    container.classList.add('speaking-animation')
    setTimeout(() => {
      container.classList.remove('speaking-animation')
    }, 300)
  }
})
</script>

<style scoped>
.digital-human-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.digital-human-main {
  position: relative;
}

.digital-human-avatar {
  position: relative;
  transition: all 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.digital-human-avatar.listening {
  transform: translateY(0);
}

.digital-human-avatar.speaking {
  animation: bob 0.5s ease-in-out infinite;
}

.digital-human-avatar.loading {
  opacity: 0.8;
}

.digital-human-avatar.recording {
  animation: pulse 1s ease-in-out infinite;
}

.digital-human-avatar.thinking {
  transform: translateY(-5px);
}

/* 状态提示气泡 */
.status-bubble {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #3B82F6;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.status-bubble.speaking {
  background-color: #10B981;
}

.status-bubble.loading {
  background-color: #F59E0B;
}

.status-bubble.recording {
  background-color: #EF4444;
}

.status-bubble.thinking {
  background-color: #8B5CF6;
}

.bubble-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

/* 状态指示器 */
.digital-human-status {
  margin-top: 20px;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-dots {
  display: flex;
  gap: 4px;
}

.status-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3B82F6;
  opacity: 0.5;
  animation: dotAnimation 1.4s infinite ease-in-out both;
}

.listening .status-dots span {
  background-color: #3B82F6;
}

.speaking .status-dots span {
  background-color: #10B981;
  animation: dotAnimation 0.8s infinite ease-in-out both;
}

.loading .status-dots span {
  background-color: #F59E0B;
  animation: dotAnimation 1s infinite ease-in-out both;
}

.recording .status-dots span {
  background-color: #EF4444;
  animation: dotAnimation 0.6s infinite ease-in-out both;
}

.thinking .status-dots span {
  background-color: #8B5CF6;
  animation: dotAnimation 1.2s infinite ease-in-out both;
}

/* 动画效果 */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes dotAnimation {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.speaking-animation {
  transform: scale(1.02);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .digital-human-avatar svg {
    width: 160px;
    height: 160px;
  }
  .status-bubble {
    font-size: 12px;
    padding: 6px 12px;
    top: -40px;
  }
}
</style>